<template>
  <div class="dashboard-container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row>
        <el-form ref="searchref">
          <el-input placeholder="搜索" clearable style="width:200px" class="serch" v-model="queryinfo.username" @keyup.enter.native="getlist">
          </el-input>
          <el-button type="primary" size="small" icon="el-icon-search" @click="getlist">搜索</el-button>
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </el-form>
      </el-row>

      <!-- 新增用户区域 -->
      <el-row class="add">
        <el-button type="success" icon="el-icon-circle-plus" class="addbtn" @click="addopen">添加</el-button>
      </el-row>

      <!-- alert 区域 -->
      <el-alert :title="'一共' + total+ '条数据'" type="info" show-icon :closable='false'>
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="userlist" border style="width: 100%">
        <el-table-column prop="permission_group_id" label="序号">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="introduction" label="权限组名称">
        </el-table-column>
        <el-table-column prop="role" label="角色">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.page" :page-sizes="[3, 5, 10, 15]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加用户的模态框 -->
    <el-dialog title="添加用户" :visible.sync="isopen" width="50%" @closed="close">
      <el-form :model="from" :rules="rules" ref="from" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="from.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="from.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="from.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="from.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select v-model="from.permission_group_id" placeholder="请选择权限">
            <el-option :label="item.title" :value="item.id" v-for="item in permissionlist " :key="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="from.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" v-model="from.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isopen = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑用户的模态框 -->
    <el-dialog title="编辑用户" :visible.sync="isedit" width="50%">
      <el-form :model="editfrom" :rules="rules" ref="editfrom" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editfrom.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editfrom.email"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="editfrom.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select v-model="editfrom.permission_group_id" placeholder="请选择权限">
            <el-option :label="item.title" :value="item.id" v-for="item in permissionlist " :key="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editfrom.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" v-model="editfrom.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isedit = false">取 消</el-button>
        <el-button type="primary" @click="editsure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list as userlist, add as useradd, detail, remove, update } from '../../api/base/users' // 获取用户数据的请求  添加用户的
import { list as permissionlist } from '../../api/base/permissions' // 获取用户权限列表

export default {
  data () {
    return {
      // 请求用户数据
      queryinfo: {
        username: '',
        page: 1,
        pagesize: 5
      },
      chose: 0, // . 用来控制 添加还是编辑用户的文本显示
      total: 0, // 总数

      userlist: [], // 用户数据
      permissionlist: [], // 用户权限数组
      serach: '', // 搜索框的双向绑定
      isopen: false,
      isedit: false, // 控制编辑用户的模态框是否开启

      from: { // 添加用户表单
        username: '',
        password: '',
        email: '',
        role: '', // 角色
        permission_group_id: '', // 用户权限id
        phone: 0,
        introduction: ''
      },

      editfrom: { // 编辑用户的数据对象
        id: 0,
        username: '',
        email: '',
        role: '', // 角色
        permission_group_id: '', // 用户权限id
        phone: 0,
        introduction: ''
      },

      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [{ pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, required: true, message: '请输入邮箱' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }],
        permission_group_id: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    // 发送请求 获取表格数据
    getlist () {
      userlist(this.queryinfo)
        .then(res => {
          this.total = res.data.counts
          this.userlist = res.data.list
          // console.log(this.userlist)
        })
    },
    // 点击后清除当前的搜索框 并重新获取数据
    reset () {
      this.queryinfo.username = ''
      this.getlist()
    },

    // 分页的每页显示多少条数据
    handleSizeChange (newsize) {
      this.queryinfo.pagesize = newsize
      this.getlist()
    },
    // 当前是哪一页
    handleCurrentChange (newpanum) {
      this.queryinfo.page = newpanum
      this.getlist()
    },
    // 获取 用户权限组数据 并渲染在下拉框中
    getpermissionlist () {
      permissionlist(this.queryinfo)
        .then(res => {
          this.permissionlist = res.data.list
          // console.log(this.permissionlist)
        })
    },

    // 点击添加 打开添加的模态框 然后发送请求 获取用户权限数组
    addopen () {
      this.chose = 0
      this.getpermissionlist()
      this.isopen = true
    },

    // 模态框关闭后 要清空当前的表单
    close () {
      this.$refs.from.resetFields()
      console.log(this.from)
    },

    // 点击后用户到后台 更新页面 关闭模态框
    add () {
      console.log(this.from)
      useradd(this.from)
        .then(res => {
          console.log(res)
          if (res.status !== 200) {
            return this.$message.error('添加失败')
          }
          this.$message.success('添加成功')
          this.getlist()
          this.isopen = false
        })
    },

    // 点击编辑 发送请求 并把这个获取到的数据 赋值给
    edit (userinfo) {
      console.log()
      // 打开模态框 发送请求 获取当前的数组 并赋值给当前的编辑的数组
      this.getpermissionlist() // 获取下拉框里面的数据
      // 发送请求 并赋值给当前的编辑用户数据
      detail(userinfo)
        .then(res => {
          console.log(res)
          this.editfrom.id = res.data.id
          this.editfrom.username = res.data.username
          this.editfrom.email = res.data.email
          this.editfrom.role = res.data.role
          this.editfrom.permission_group_id = res.data.permission_group_id
          this.editfrom.phone = res.data.phone
          this.editfrom.introduction = res.data.introduction
        })
      this.isedit = true
    },

    // 点击确定 发送请求 并修改用户数据
    editsure () {
      update(this.editfrom)
        .then(res => {
          console.log(res)
          if (res.status !== 200) {
            return this.$message.error('修改用户信息失败')
          }
          return this.$message.success('修改用户信息成功')
        })
      this.isedit = false
      this.getlist()
    },
    del (userinfo) {
      // 询问一下
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(userinfo)
          .then(res => {
            console.log(res)
            if (res.status !== 200) {
              return this.$message.error('删除用户失败')
              // 重新获取数据
            }
          })

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  computed: {

  }
}
</script>

<style lang="scss" scoped>
.add {
  margin-top: 10px;
}
.el-card {
  margin-top: 20px;
}
.serch {
  margin: 20px 0 0 20px;
}
.addbtn {
  float: right;
  margin-right: 20px;
}
.el-alert {
  margin-top: 15px;
}
.el-table {
  margin: 10px 0;
}
</style>
